<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备录入</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="js/ajax.js"></script>
</head>
<body>
<div id="app" style="display:none;">

    <img v-if="barimgsrc" :src="'http://java59.hfbdqn.cn/findimg?fileName='+barimgsrc" width="100%" />

    <div class="weui-cells weui-cells_form">
        <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
                <label for="" class="weui-label">设备类型</label>
            </div>
            <div class="weui-cell__bd">
                <select class="weui-select" name="select2" v-model="eq.equipmentType.id">
                    <option v-for="t in ets" :value="t.id">{{t.typeName}}</option>
                </select>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">设备名称</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" id="eName"
                       placeholder="请输入设备名称"  v-model="eq.name" />
            </div>
            <div class="weui-cell__ft">
                <i class="weui-icon-warn"></i>
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__bd">
                <div class="weui-uploader">
                    <div class="weui-uploader__hd">
                        <p class="weui-uploader__title">图片上传(4张以内)</p>

                    </div>
                    <div class="weui-uploader__bd">

                        <ul class="weui-uploader__files" id="uploaderFiles">
                            <li v-for="p in allpics"
                                class="weui-uploader__file"
                                :style="'background-color:#eee;background-image:url('+p.picurl+')'">
                            </li>
                        </ul>

                        <div class="weui-uploader__input-box" onclick="upload()">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <a href="javascript:;" onclick="addEq()"
       style="width:90%;margin-top:20px;" class="weui-btn weui-btn_primary"
    >录入</a>
</div>

<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>

<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.min.js"></script>
<script src="js/getopenid.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="js/jssdk.js"></script>
<script>
    var user_openid;
    getopenid(function(openid){

        $.showLoading("正在加载...");
        $.get("/find_baoxiuman_byopenid", {openid: openid}, function (data) {
            $.hideLoading();
            if (!data) {
                $.toast("您还未绑定，请您先绑定！","cancel",function(){
                    location = 'baoxiuman_add.html';
                })
            }else{
                user_openid = openid;
                app.style.display= "";
            }
        });
    });
    var v = new Vue({
        el: "#app",
        data: {
            barimgsrc:'',
            ets: [],
            uploadedPics: [],
            allpics: [],
            isAdd:false,
            eq:{
                name:"",
                equipmentType:{
                    id:0
                },
                equipmentPics:[],
                baoXiuMan:{}
            }
        }
    });
    jssdk(function(){}, ['chooseImage','getLocalImgData','uploadImage']);
    $.showLoading("正在加载...");
    $.get("/find_all_et", {}, function (data) {
        //console.log(data);
        v.ets = data;
        $.hideLoading();

    })




    function upload() {
        wx.chooseImage({
            count: 4, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，
                $.showLoading("请稍后...")
                var picCount = localIds.length;

                var picUploadedCount = 0;
                for(var i=0;i<localIds.length;i++) {
                    wx.getLocalImgData({
                        localId: localIds[i], // 图片的localID
                        success: function (res) {
                            var localData = res.localData;
                            $.post("/ossupload", {
                                base64: localData
                            }, function (data) {
                                picUploadedCount++;
                                if(picUploadedCount==picCount){
                                    $.hideLoading();
                                   // allpics
                                }
                                v.allpics.push(
                                    {picurl:"http://java59.hfbdqn.cn/ossdownload?pName="+data});
                            })
                        }
                    });
                }
            }
        });
    }

    function addEq(){

        $.get("/find_baoxiuman_byopenid", {openid:user_openid}, function (dd) {
            //console.log(data);
            v.eq.baoXiuMan = dd;

            for(var i = 0;i<v.allpics.length;i++){
                v.eq.equipmentPics.push({
                    url:v.allpics[i].picurl
                });
            }

            ajax("addeq",v.eq,function(data){
                v.barimgsrc = data.barCode;
                $.toast("录入成功！",function(){
                    location = 'baoxiuman_main.html'
                })
                v.allpics = [];
                v.eq = {
                    name:"",
                    equipmentType:{
                        id:0
                    },
                    equipmentPics:[]
                }
            });
        })


    }

</script>

</body>
</html>